<template>
  <div class="home-page tomato-mobile">
    <!-- 轮播横幅 -->
    <section class="hero-section">
      <div class="hero-banner">
        <el-carousel height="400px" indicator-position="outside">
          <el-carousel-item v-for="novel in featuredNovels" :key="novel.id">
            <div class="banner-item" :style="{ backgroundImage: `url(${novel.cover})` }">
              <div class="banner-overlay">
                <div class="banner-content">
                  <h2 class="banner-title">{{ novel.title }}</h2>
                  <p class="banner-desc">{{ novel.description }}</p>
                  <div class="banner-meta">
                    <span class="author">{{ novel.author }}</span>
                    <span class="rating">
                      <el-rate v-model="novel.rating" disabled show-score text-color="#ff9900" />
                    </span>
                  </div>
                  <div class="banner-actions">
                    <el-button type="primary" size="large" @click="startReading(novel.id)">
                      开始阅读
                    </el-button>
                    <el-button type="default" size="large" @click="goToNovel(novel.id)">
                      查看详情
                    </el-button>
                  </div>
                </div>
              </div>
            </div>
          </el-carousel-item>
        </el-carousel>
      </div>
    </section>

    <!-- 分类导航 -->
    <section class="category-section">
      <div class="section-header">
        <h3 class="section-title">{{ $t('home.sections.category') }}</h3>
      </div>
      <div class="category-grid">
        <div
          v-for="category in categories"
          :key="category.key"
          class="category-card"
          @click="goToCategory(category.key)"
        >
          <div class="category-icon">
            <el-icon :size="32">
              <component :is="category.icon" />
            </el-icon>
          </div>
          <h4 class="category-name">{{ $t(`novel.category.${category.key}`) }}</h4>
          <p class="category-count">{{ category.count }} 部作品</p>
        </div>
      </div>
    </section>

    <!-- 推荐小说 -->
    <section class="recommendation-section">
      <div class="section-header">
        <h3 class="section-title">{{ $t('home.sections.recommended') }}</h3>
        <router-link to="/library" class="more-link">
          {{ $t('common.more') }}
        </router-link>
      </div>
      <div class="novel-grid">
        <NovelCard
          v-for="item in novelStore.recommendations"
          :key="item.novel.id"
          :novel="item.novel"
          :recommendation="item"
        />
      </div>
    </section>

    <!-- 热门小说 -->
    <section class="popular-section">
      <div class="section-header">
        <h3 class="section-title">{{ $t('home.sections.popular') }}</h3>
        <router-link to="/library?sort=popular" class="more-link">
          {{ $t('common.more') }}
        </router-link>
      </div>
      <div class="novel-grid">
        <NovelCard
          v-for="novel in novelStore.popularNovels.slice(0, 8)"
          :key="novel.id"
          :novel="novel"
        />
      </div>
    </section>

    <!-- 最新更新 -->
    <section class="latest-section">
      <div class="section-header">
        <h3 class="section-title">{{ $t('home.sections.latest') }}</h3>
        <router-link to="/library?sort=latest" class="more-link">
          {{ $t('common.more') }}
        </router-link>
      </div>
      <div class="novel-grid">
        <NovelCard
          v-for="novel in novelStore.latestNovels.slice(0, 8)"
          :key="novel.id"
          :novel="novel"
        />
      </div>
    </section>
  </div>
</template>

<script setup lang="ts">
import { computed, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { useNovelStore } from '@/stores/novel'
import { getChaptersByNovelId } from '@/api/novels'
import NovelCard from '@/components/NovelCard.vue'

const router = useRouter()
const novelStore = useNovelStore()

// 特色推荐小说（轮播图）
const featuredNovels = computed(() => {
  return novelStore.popularNovels.slice(0, 3)
})

// 分类数据
const categories = [
  { key: 'fantasy', icon: 'MagicStick', count: 1250 },
  { key: 'urban', icon: 'OfficeBuilding', count: 890 },
  { key: 'romance', icon: 'Heart', count: 756 },
  { key: 'historical', icon: 'Clock', count: 634 },
  { key: 'scifi', icon: 'Rocket', count: 423 },
  { key: 'mystery', icon: 'Search', count: 312 },
  { key: 'military', icon: 'Sword', count: 189 },
  { key: 'game', icon: 'Monitor', count: 267 }
]

/**
 * 跳转到小说详情页
 */
const goToNovel = (novelId: string) => {
  router.push(`/novel/${novelId}`)
}

/**
 * 开始阅读小说
 */
const startReading = async (novelId: string) => {
  try {
    // 获取小说的章节列表
    const chapters = await getChaptersByNovelId(novelId)
    if (chapters && chapters.length > 0) {
      // 使用第一章的ID
      const firstChapterId = chapters[0].id
      router.push(`/reader/${novelId}/${firstChapterId}`)
    } else {
      console.error('No chapters found for novel:', novelId)
    }
  } catch (error) {
    console.error('Failed to get chapters:', error)
    // 降级处理：如果获取章节失败，就跳转到详情页
    router.push(`/novel/${novelId}`)
  }
}

/**
 * 跳转到分类页面
 */
const goToCategory = (category: string) => {
  router.push(`/library/${category}`)
}

/**
 * 组件挂载时初始化数据
 */
onMounted(() => {
  novelStore.initHomeData()
})
</script>

<style lang="scss" scoped>
.home-page {
  .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-xl);
    
    .section-title {
      font-size: var(--font-size-2xl);
      font-weight: 600;
      color: var(--text-primary);
      margin: 0;
    }
    
    .more-link {
      color: var(--primary-color);
      text-decoration: none;
      font-weight: 500;
      
      &:hover {
        color: var(--primary-dark);
      }
    }
  }
}

// 轮播横幅
.hero-section {
  margin-bottom: var(--spacing-2xl);
  
  .banner-item {
    position: relative;
    height: 400px;
    background-size: cover;
    background-position: center;
    border-radius: var(--radius-xl);
    overflow: hidden;
  }
  
  .banner-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
      135deg,
      rgba(0, 0, 0, 0.7) 0%,
      rgba(0, 0, 0, 0.3) 50%,
      rgba(0, 0, 0, 0.1) 100%
    );
    display: flex;
    align-items: center;
    padding: var(--spacing-2xl);
  }
  
  .banner-content {
    max-width: 50%;
    color: white;
    
    .banner-title {
      font-size: var(--font-size-3xl);
      font-weight: bold;
      margin-bottom: var(--spacing-md);
      text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    }
    
    .banner-desc {
      font-size: var(--font-size-lg);
      line-height: var(--line-height-relaxed);
      margin-bottom: var(--spacing-lg);
      opacity: 0.9;
    }
    
    .banner-meta {
      display: flex;
      align-items: center;
      gap: var(--spacing-lg);
      margin-bottom: var(--spacing-xl);
      
      .author {
        font-weight: 500;
      }
    }
    
    .banner-actions {
      display: flex;
      gap: var(--spacing-md);
    }
  }
}

// 分类网格
.category-section {
  margin-bottom: var(--spacing-2xl);
}

.category-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--spacing-lg);
}

.category-card {
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: var(--spacing-xl);
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
  
  &:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: var(--primary-color);
  }
  
  .category-icon {
    color: var(--primary-color);
    margin-bottom: var(--spacing-md);
  }
  
  .category-name {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--spacing-sm);
  }
  
  .category-count {
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
  }
}

// 小说网格
.recommendation-section,
.popular-section,
.latest-section {
  margin-bottom: var(--spacing-2xl);
}

.novel-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--spacing-lg);
}

// 番茄风格移动端优化
@media (max-width: 768px) {
  .tomato-mobile {
    background: var(--tomato-background);
    
    // 轮播图优化
    .hero-section {
      margin: 0 0 var(--tomato-space-xl);
      
      .el-carousel {
        border-radius: 0 0 var(--tomato-radius-xl) var(--tomato-radius-xl);
        overflow: hidden;
      }
      
      .banner-item {
        .banner-overlay {
          background: linear-gradient(45deg, rgba(0,0,0,0.7), rgba(0,0,0,0.3));
        }
        
        .banner-content {
          max-width: 90%;
          padding: var(--tomato-space-xl);
          
          .banner-title {
            font-size: 24px;
            font-weight: 700;
            margin-bottom: var(--tomato-space-md);
            text-shadow: 0 2px 4px rgba(0,0,0,0.3);
          }
          
          .banner-desc {
            font-size: 16px;
            line-height: 1.5;
            margin-bottom: var(--tomato-space-lg);
            opacity: 0.9;
          }
          
          .banner-actions {
            flex-direction: row;
            gap: var(--tomato-space-md);
            
            .el-button {
              border-radius: var(--tomato-radius-large);
              padding: var(--tomato-space-md) var(--tomato-space-xl);
              font-weight: 600;
              box-shadow: var(--tomato-shadow-button);
            }
          }
        }
      }
    }
    
    // 分类卡片优化
    .category-section {
      padding: 0 var(--tomato-space-lg);
      margin-bottom: var(--tomato-space-2xl);
      
      .section-title {
        font-size: 20px;
        font-weight: 700;
        color: var(--tomato-text-primary);
        margin-bottom: var(--tomato-space-lg);
      }
      
      .category-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: var(--tomato-space-md);
        
        .category-card {
          background: var(--tomato-card-bg);
          border-radius: var(--tomato-radius-large);
          box-shadow: var(--tomato-shadow-card);
          border: 1px solid var(--tomato-border);
          transition: var(--tomato-transition);
          overflow: hidden;
          padding: var(--tomato-space-lg);
          text-align: center;
          aspect-ratio: 1;
          display: flex;
          flex-direction: column;
          justify-content: center;
          
          &:active {
            transform: scale(0.95);
          }
          
          .category-icon {
            color: var(--tomato-primary);
            margin-bottom: var(--tomato-space-sm);
          }
          
          .category-name {
            font-size: 14px;
            font-weight: 600;
            color: var(--tomato-text-primary);
            margin-bottom: var(--tomato-space-xs);
          }
          
          .category-count {
            font-size: 12px;
            color: var(--tomato-text-secondary);
          }
        }
      }
    }
    
    // 小说推荐区域优化
    .recommendation-section,
    .popular-section,
    .latest-section {
      padding: 0 var(--tomato-space-lg);
      margin-bottom: var(--tomato-space-2xl);
      
      .section-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: var(--tomato-space-lg);
        
        .section-title {
          font-size: 18px;
          font-weight: 700;
          color: var(--tomato-text-primary);
        }
        
        .more-link {
          color: var(--tomato-primary);
          font-size: 14px;
          font-weight: 500;
          text-decoration: none;
          
          &:active {
            opacity: 0.7;
          }
        }
      }
      
      .novel-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: var(--tomato-space-md);
      }
    }
  }
}

@media (max-width: 480px) {
  .tomato-mobile {
    .category-section .category-grid {
      grid-template-columns: repeat(2, 1fr);
      
      .category-card {
        .category-name {
          font-size: 12px;
        }
        
        .category-count {
          font-size: 10px;
        }
      }
    }
    
    .novel-grid {
      grid-template-columns: 1fr !important;
    }
    
    .banner-content .banner-actions {
      flex-direction: column;
      gap: var(--tomato-space-sm);
    }
  }
}
</style> 